<template>
    <div class="ecosystem-page">
      <!-- 动态背景 -->
      <div class="animated-background">
        <div class="gradient-sphere"></div>
        <div class="network-grid"></div>
      </div>
  
      <!-- 英雄区块 -->
      <section class="hero-section">
        <div class="hero-content">
          <h1 class="hero-title">
            <span class="gradient-text">开放API生态系统</span>
            <div class="subtitle-wrapper">
              <span class="typing-text">连接创新，驱动未来</span>
            </div>
          </h1>
          <p class="hero-description">
            发现数千个强大的API，构建下一代创新应用
            <br>让数据流动，让创意绽放
          </p>
          <div class="hero-stats">
            <div class="stat-item">
              <div class="stat-icon">
                <i class="fas fa-plug"></i>
              </div>
              <div class="stat-info">
                <span class="stat-number">2000+</span>
                <span class="stat-label">可用API</span>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon">
                <i class="fas fa-users"></i>
              </div>
              <div class="stat-info">
                <span class="stat-number">50000+</span>
                <span class="stat-label">开发者</span>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon">
                <i class="fas fa-code-branch"></i>
              </div>
              <div class="stat-info">
                <span class="stat-number">100M+</span>
                <span class="stat-label">每日调用</span>
              </div>
            </div>
          </div>
        </div>
        <div class="hero-image">
          <img src="https://tucdn.wpon.cn/2024/03/18/65f8291c3e8d5.svg" alt="API生态系统">
        </div>
      </section>
  
      <!-- 特色功能区 -->
      <section class="features-section">
        <h2 class="section-title">为什么选择我们的API生态系统？</h2>
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-rocket"></i>
            </div>
            <h3>快速集成</h3>
            <p>简单的API文档和SDK，让您的应用在几分钟内即可接入</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-shield-alt"></i>
            </div>
            <h3>安全可靠</h3>
            <p>企业级安全保障，99.9%的服务可用性</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-chart-line"></i>
            </div>
            <h3>实时监控</h3>
            <p>详细的调用统计和性能监控，掌握每一个API的运行状态</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-hands-helping"></i>
            </div>
            <h3>专业支持</h3>
            <p>7*24小时技术支持，确保您的业务永不停歇</p>
          </div>
        </div>
      </section>
  
      <!-- 解决方案展示 -->
      <section class="solutions-section">
        <h2 class="section-title">适用场景</h2>
        <div class="solutions-slider">
          <div class="solution-card" v-for="solution in solutions" :key="solution.id">
            <div class="solution-image">
              <img :src="solution.image" :alt="solution.title" @error="handleImageError">
            </div>
            <div class="solution-content">
              <h3>{{ solution.title }}</h3>
              <p>{{ solution.description }}</p>
              <ul class="solution-features">
                <li v-for="feature in solution.features" :key="feature">
                  <i class="fas fa-check"></i>
                  {{ feature }}
                </li>
              </ul>
              <button class="learn-more">了解更多</button>
            </div>
          </div>
        </div>
      </section>
  
      <!-- 开发者故事 -->
      <section class="stories-section">
        <h2 class="section-title">开发者故事</h2>
        <div class="stories-grid">
          <div class="story-card" v-for="story in stories" :key="story.id">
            <div class="story-header">
              <img :src="story.avatar" :alt="story.name" class="developer-avatar">
              <div class="developer-info">
                <h3>{{ story.name }}</h3>
                <span>{{ story.role }}</span>
              </div>
            </div>
            <p class="story-content">{{ story.content }}</p>
            <div class="story-footer">
              <img :src="story.companyLogo" :alt="story.company" class="company-logo">
              <span class="company-name">{{ story.company }}</span>
            </div>
          </div>
        </div>
      </section>
  
      <!-- 开始使用区域 -->
      <section class="get-started-section">
        <div class="content-wrapper">
          <h2>准备好开始了吗？</h2>
          <p>加入我们的API生态系统，开启您的创新之旅</p>
          <div class="action-buttons">
            <button class="primary-btn">
              <i class="fas fa-paper-plane"></i>
              立即开始
            </button>
            <button class="secondary-btn">
              <i class="fas fa-book"></i>
              查看文档
            </button>
          </div>
        </div>
      </section>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ApiEcosystem',
    data() {
      return {
        solutions: [
          {
            id: 1,
            title: '人工智能应用',
            description: '接入领先的AI模型API，快速构建智能应用，释放AI的无限潜能',
            image: 'https://tucdn.wpon.cn/2024/03/18/65f82e5cd2e86.svg',
            features: [
              '自然语言处理',
              '计算机视觉',
              '语音识别',
              '推荐系统'
            ]
          },
          {
            id: 2,
            title: '数据分析平台',
            description: '强大的数据处理API，让您的决策更智能',
            image: 'https://tucdn.wpon.cn/2024/03/18/65f82e9856275.svg',
            features: [
              '实时数据分析',
              '预测模型',
              '可视化图表',
              '数据挖掘'
            ]
          },
          {
            id: 3,
            title: '物联网集成',
            description: '连接智能设备，构建物联网生态系统',
            image: 'https://tucdn.wpon.cn/2024/03/18/65f82ec807dd2.svg',
            features: [
              '设备管理',
              '实时监控',
              '数据采集',
              '远程控制'
            ]
          }
        ],
        stories: [
          {
            id: 1,
            name: '张明',
            role: '高级开发工程师',
            avatar: 'https://tucdn.wpon.cn/2024/03/18/65f82f0097f4b.jpg',
            content: '使用API生态系统让我们的开发效率提升了300%，现在我们可以专注于业务创新。',
            company: 'TechStart',
            companyLogo: 'https://tucdn.wpon.cn/2024/03/18/65f82f2cd8723.svg'
          },
          {
            id: 2,
            name: '李婷',
            role: '技术总监',
            avatar: 'https://tucdn.wpon.cn/2024/03/18/65f82f5cd645e.jpg',
            content: '稳定的API服务和完善的文档让我们的团队开发体验极大提升，强烈推荐！',
            company: 'DataFlow',
            companyLogo: 'https://tucdn.wpon.cn/2024/03/18/65f82f8cd2186.svg'
          },
          {
            id: 3,
            name: '王浩',
            role: '创始人 & CEO',
            avatar: 'https://tucdn.wpon.cn/2024/03/18/65f82fb53e8d5.jpg',
            content: '借助这个API生态系统，我们在3个月内就完成了产品的MVP开发和市场验证。',
            company: 'AInnova',
            companyLogo: 'https://tucdn.wpon.cn/2024/03/18/65f82fe52ed76.svg'
          }
        ]
      }
    },
    methods: {
      handleImageError(e) {
        e.target.src = 'https://tucdn.wpon.cn/2024/03/18/65f8291c3e8d5.svg';
      }
    }
  }
  </script>
  
  <style scoped>
  .ecosystem-page {
    min-height: 100vh;
    background: #0f172a;
    color: #fff;
    overflow: hidden;
    position: relative;
  }
  
  .animated-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
  }
  
  .gradient-sphere {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, 
      rgba(79, 70, 229, 0.2) 0%,
      rgba(99, 102, 241, 0.1) 50%,
      transparent 100%);
    border-radius: 50%;
    filter: blur(40px);
    animation: float 20s infinite ease-in-out;
  }
  
  .network-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
  }
  
  /* Hero Section */
  .hero-section {
    position: relative;
    padding: 100px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .hero-title {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2rem;
  }
  
  .gradient-text {
    background: linear-gradient(135deg, #60a5fa, #4f46e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  /* Features Section */
  .features-section {
    padding: 100px 0;
    background: rgba(255, 255, 255, 0.02);
  }
  
  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem;
  }
  
  .feature-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
  }
  
  .feature-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
  }
  
  /* Solutions Section */
  .solutions-section {
    padding: 100px 0;
    background: rgba(255, 255, 255, 0.02);
  }
  
  .solutions-slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .solution-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .solution-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border-color: rgba(79, 70, 229, 0.3);
  }
  
  .solution-image {
    height: 200px;
    overflow: hidden;
    position: relative;
    background: rgba(79, 70, 229, 0.1);
  }
  
  .solution-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .solution-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.2) 100%
    );
  }
  
  .solution-content {
    padding: 2rem;
  }
  
  .solution-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #fff;
  }
  
  .solution-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
  }
  
  .solution-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
  }
  
  .solution-features li:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
  }
  
  .solution-features li i {
    color: #4f46e5;
    font-size: 0.9rem;
    background: rgba(79, 70, 229, 0.2);
    padding: 0.5rem;
    border-radius: 50%;
  }
  
  /* Get Started Section */
  .get-started-section {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(99, 102, 241, 0.1));
    padding: 100px 0;
    text-align: center;
  }
  
  .action-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 2rem;
  }
  
  .primary-btn,
  .secondary-btn {
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .primary-btn {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
  }
  
  .primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
  }
  
  .primary-btn:active {
    transform: translateY(1px);
  }
  
  .secondary-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(10px);
  }
  
  .secondary-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
  }
  
  /* Animations */
  @keyframes float {
    0%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-30px) rotate(180deg);
    }
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .hero-title {
      font-size: 2.5rem;
    }
    
    .hero-section {
      flex-direction: column;
      padding: 50px 20px;
    }
    
    .features-grid {
      grid-template-columns: 1fr;
    }
    
    .solutions-slider,
    .stories-grid {
      grid-template-columns: 1fr;
      padding: 1rem;
    }
    
    .solution-card,
    .story-card {
      margin: 0 1rem;
    }
    
    .action-buttons {
      flex-direction: column;
      gap: 1rem;
      padding: 0 1rem;
    }
    
    .primary-btn,
    .secondary-btn {
      width: 100%;
      justify-content: center;
    }
    
    .solution-image {
      height: 160px;
    }
  }
  </style>